<template>
  <div class="custom-timeline-container" ref="containerRef">
    <!-- 时间轴区域 -->
    <div class="timeline-wrapper" ref="wrapperRef">
      <canvas 
        ref="canvasRef" 
        @mousedown="handleMouseDown"
        @mousemove="handleMouseMove"
        @mouseup="handleMouseUp"
        @click="handleClick"
        @wheel="handleWheel"
      ></canvas>
      
    </div>
    
    <div class="scrollbar-container" ref="scrollbarRef">
      <div class="scrollbar-track" @click="handleScrollbarClick">
        <div 
          class="scrollbar-thumb" 
          ref="thumbRef"
          @mousedown="handleThumbMouseDown"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue'

// Props定义
interface Props {
  // 时间范围
  startTime?: string
  endTime?: string
  // 当前时间
  currentTime?: string
  // 缩放级别 (0-10)
  zoomLevel?: number
  // 是否显示时间段
  timeSegments?: Array<{
    beginTime?: number
    endTime?: number
    color?: string
    startRatio?: number
    endRatio?: number
    cameraId?: string
    recordIndex?: number
    label?: string
    // 新的录像段数据格式
    Index?: number
    EquId?: number
    SubEquId?: number
    Channel?: number
    StartTime?: string
    EndTime?: string
  }>
  // 设备列表
  deviceList?: Array<{
    id: string
    name: string
    color: string
  }>
  // 是否允许拖拽
  enableDrag?: boolean
  // 是否允许缩放
  enableZoom?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  startTime: '00:00:00',
  endTime: '23:59:59',
  currentTime: '12:00:00',
  zoomLevel: 5,
  timeSegments: () => [],
  deviceList: () => [],
  enableDrag: true,
  enableZoom: true
})

// Emits定义
const emit = defineEmits<{
  timeChange: [time: string]
  zoomChange: [level: number]
}>()

// 组件引用
const containerRef = ref<HTMLElement>()
const canvasRef = ref<HTMLCanvasElement>()
const wrapperRef = ref<HTMLElement>()
const scrollbarRef = ref<HTMLElement>()
const thumbRef = ref<HTMLElement>()

// 状态变量
const isDragging = ref(false)
const dragStartX = ref(0)
const dragStartTime = ref('')
const hoverTime = ref('')
const showHoverTime = ref(false)
const hoverX = ref(0)
const selectedTime = ref('')

// 滚动相关状态
const scrollOffset = ref(0) // 滚动偏移量（像素）
const isThumbDragging = ref(false)
const thumbDragStartX = ref(0)
const thumbDragStartOffset = ref(0)

// 缩放级别配置
const zoomConfigs = [
  { label: '30分钟', hours: 0.5, gridHours: 0.1 },   // 0
  { label: '1小时', hours: 1, gridHours: 0.2 },      // 1
  { label: '2小时', hours: 2, gridHours: 0.5 },      // 2
  { label: '6小时', hours: 6, gridHours: 1 },        // 3
  { label: '12小时', hours: 12, gridHours: 2 },      // 4
]

// 计算当前缩放配置
const currentZoom = computed(() => zoomConfigs[props.zoomLevel] || zoomConfigs[5])





// 时间转换工具函数
const timeToMinutes = (timeStr: string): number => {
  const [hours, minutes, seconds] = timeStr.split(':').map(Number)
  return hours * 60 + minutes + seconds / 60
}

const minutesToTime = (minutes: number): string => {
  const hours = Math.floor(minutes / 60)
  const mins = Math.floor(minutes % 60)
  const secs = Math.floor((minutes % 1) * 60)
  return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

const formatTimeDisplay = (minutes: number): string => {
  const hours = Math.floor(minutes / 60)
  const mins = Math.floor(minutes % 60)
  
  if (hours === 0 && mins === 0) return '00:00'
  if (mins === 0) return `${hours.toString().padStart(2, '0')}:00`
  return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`
}

// Canvas绘制函数
const drawTimeline = () => {
  if (!canvasRef.value || !containerRef.value) return
  
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')
  if (!ctx) return
  
  const containerWidth = containerRef.value.clientWidth
  const containerHeight = containerRef.value.clientHeight
  
  // 设置canvas尺寸
  canvas.width = containerWidth
  canvas.height = containerHeight
  
  // 清空画布
  ctx.clearRect(0, 0, containerWidth, containerHeight)
  
  // 设置样式
  ctx.fillStyle = '#1a1a1a'
  ctx.fillRect(0, 0, containerWidth, containerHeight)
  
  // 计算时间范围
  const startMinutes = timeToMinutes(props.startTime)
  const endMinutes = timeToMinutes(props.endTime)
  const currentMinutes = timeToMinutes(props.currentTime)
  const totalMinutes = endMinutes - startMinutes
  
  // 计算显示的时间范围（基于缩放级别）
  const displayHours = currentZoom.value.hours
  const displayMinutes = displayHours * 60
  
  // 计算总的时间轴宽度（像素）
  const totalTimelineWidth = totalMinutes * (containerWidth / displayMinutes)
  
  // 计算像素比例
  const pixelsPerMinute = containerWidth / displayMinutes
  
  // 绘制时间刻度
  const gridHours = currentZoom.value.gridHours
  const gridMinutes = gridHours * 60
  
  ctx.strokeStyle = '#3a3a3a'
  ctx.lineWidth = 1
  ctx.font = '12px Arial'
  ctx.fillStyle = '#ffffff'
  
  // 绘制主要刻度线
  for (let minutes = 0; minutes <= totalMinutes; minutes += gridMinutes) {
    const x = minutes * pixelsPerMinute - scrollOffset.value
    
    // 只绘制在可视区域内的刻度线
    if (x >= -50 && x <= containerWidth + 50) {
      // 绘制刻度线
      ctx.beginPath()
      ctx.moveTo(x, 0)
      ctx.lineTo(x, containerHeight)
      ctx.stroke()
      
      // 绘制时间标签
      const timeMinutes = startMinutes + minutes
      if (timeMinutes >= 0 && timeMinutes <= 24 * 60) {
        const timeStr = formatTimeDisplay(timeMinutes)
        ctx.fillText(timeStr, x + 2, 15)
      }
    }
  }
  
  
  // 绘制录像段
  
  if (props.timeSegments && props.timeSegments.length > 0) {
    // 获取设备列表用于计算录像段位置
    const deviceHeight = props.deviceList ? containerHeight / props.deviceList.length : containerHeight
    
    props.timeSegments.forEach((segment, index) => {
      
      // 处理旧格式的录像段数据（beginTime和endTime是时间戳）
      if (segment.beginTime && segment.endTime) {
        // 将时间戳转换为Date对象
        const startDate = new Date(segment.beginTime)
        const endDate = new Date(segment.endTime)
        
        // 计算录像段在当天的时间（小时、分钟、秒）
        const startHour = startDate.getHours()
        const startMinute = startDate.getMinutes()
        const startSecond = startDate.getSeconds()
        const endHour = endDate.getHours()
        const endMinute = endDate.getMinutes()
        const endSecond = endDate.getSeconds()
        
        // 转换为分钟数（从00:00:00开始计算，包含秒数）
        const segmentStartMinutes = startHour * 60 + startMinute + startSecond / 60
        const segmentEndMinutes = endHour * 60 + endMinute + endSecond / 60
        
        // 处理跨午夜的录像段
        let clampedStartMinutes, clampedEndMinutes
        
        // 检测跨午夜：开始时间大于结束时间（说明跨越了00:00:00）
        if (segmentStartMinutes > segmentEndMinutes) {
          // 录像段跨越了00:00:00，只保留00:00:00之后的部分
          clampedStartMinutes = 0
          clampedEndMinutes = Math.min(24 * 60, segmentEndMinutes)
        } else if (segmentEndMinutes <= 0) {
          // 录像段完全在00:00:00之前，跳过
          return
        } else if (segmentStartMinutes >= 24 * 60) {
          // 录像段完全在24:00:00之后，跳过
          return
        } else {
          // 录像段在当天范围内
          clampedStartMinutes = Math.max(0, segmentStartMinutes)
          clampedEndMinutes = Math.min(24 * 60, segmentEndMinutes)
        }
        
        // 计算录像段是否在当前显示范围内
        const isInDisplayRange = clampedEndMinutes > startMinutes && clampedStartMinutes < endMinutes
        
        if (isInDisplayRange) {
          // 计算录像段在显示范围内的位置
          const segmentStartInDisplay = Math.max(0, clampedStartMinutes - startMinutes)
          const segmentEndInDisplay = Math.min(totalMinutes, clampedEndMinutes - startMinutes)
          
          // 计算像素位置
          const startX = segmentStartInDisplay * pixelsPerMinute - scrollOffset.value
          const endX = segmentEndInDisplay * pixelsPerMinute - scrollOffset.value
          
          
          // 只绘制在可视区域内的录像段
          if (startX < containerWidth && endX > 0) {
            // 计算录像段在垂直方向的位置
            let deviceIndex = 0
            if (props.deviceList) {
              const device = props.deviceList.find(d => d.id === segment.Channel?.toString())
              deviceIndex = device ? props.deviceList.indexOf(device) : 0
            }
            
            const y = deviceIndex * deviceHeight + 25  // 向下移动20像素，避免遮住时间刻度
            const height = 20  // 统一高度为20像素
            
            console.log(`CustomTimeline: 绘制录像段 ${index}:`, {
              x: Math.max(0, startX),
              y,
              width: Math.min(containerWidth, endX) - Math.max(0, startX),
              height,
              deviceIndex
            })
            
            // 绘制录像段
            ctx.fillStyle = segment.color || '#4CAF50'
            ctx.fillRect(
              Math.max(0, startX), 
              y, 
              Math.min(containerWidth, endX) - Math.max(0, startX), 
              height
            )
            
          }
        }
      }
      // 处理新格式的录像段数据（StartTime和EndTime是字符串）
      else if (segment.StartTime && segment.EndTime) {
        console.log(`CustomTimeline: 处理新格式录像段 ${index}`)
        
        // 解析时间字符串
        const startDate = new Date(segment.StartTime)
        const endDate = new Date(segment.EndTime)
        
        // 计算录像段在当天的时间（小时、分钟、秒）
        const startHour = startDate.getHours()
        const startMinute = startDate.getMinutes()
        const startSecond = startDate.getSeconds()
        const endHour = endDate.getHours()
        const endMinute = endDate.getMinutes()
        const endSecond = endDate.getSeconds()
        
        // 转换为分钟数（从00:00:00开始计算，包含秒数）
        const segmentStartMinutes = startHour * 60 + startMinute + startSecond / 60
        const segmentEndMinutes = endHour * 60 + endMinute + endSecond / 60
        
        // 处理跨午夜的录像段
        let clampedStartMinutes, clampedEndMinutes
        
        // 检测跨午夜：开始时间大于结束时间（说明跨越了00:00:00）
        if (segmentStartMinutes > segmentEndMinutes) {
          // 录像段跨越了00:00:00，只保留00:00:00之后的部分
          clampedStartMinutes = 0
          clampedEndMinutes = Math.min(24 * 60, segmentEndMinutes)
        } else if (segmentEndMinutes <= 0) {
          // 录像段完全在00:00:00之前，跳过
          return
        } else if (segmentStartMinutes >= 24 * 60) {
          // 录像段完全在24:00:00之后，跳过
          return
        } else {
          // 录像段在当天范围内
          clampedStartMinutes = Math.max(0, segmentStartMinutes)
          clampedEndMinutes = Math.min(24 * 60, segmentEndMinutes)
        }
        
        // 计算录像段是否在当前显示范围内
        const isInDisplayRange = clampedEndMinutes > startMinutes && clampedStartMinutes < endMinutes
        
        if (isInDisplayRange) {
          // 计算录像段在显示范围内的位置
          const segmentStartInDisplay = Math.max(0, clampedStartMinutes - startMinutes)
          const segmentEndInDisplay = Math.min(totalMinutes, clampedEndMinutes - startMinutes)
          
          // 计算像素位置
          const startX = segmentStartInDisplay * pixelsPerMinute - scrollOffset.value
          const endX = segmentEndInDisplay * pixelsPerMinute - scrollOffset.value
          
          // 只绘制在可视区域内的录像段
          if (startX < containerWidth && endX > 0) {
            // 计算录像段在垂直方向的位置
            let deviceIndex = 0
            if (props.deviceList) {
              const device = props.deviceList.find(d => d.id === segment.Channel?.toString())
              deviceIndex = device ? props.deviceList.indexOf(device) : 0
            }
            
            const y = deviceIndex * deviceHeight + 25  // 向下移动20像素，避免遮住时间刻度
            const height = 20  // 统一高度为20像素
            
            // 绘制录像段
            ctx.fillStyle = segment.color || '#4CAF50'
            ctx.fillRect(
              Math.max(0, startX), 
              y, 
              Math.min(containerWidth, endX) - Math.max(0, startX), 
              height
            )
            
          }
        }
      }
    })
  }
  
  // 绘制设备名称 - 在录像段绘制完成后绘制，确保不被覆盖
  if (props.deviceList && props.deviceList.length > 0) {
    const deviceHeight = containerHeight / props.deviceList.length
    
    props.deviceList.forEach((device, index) => {
      const y = index * deviceHeight + 25 + 10 + 4  // 与录像段对齐，录像段高度20，所以+10是中间位置
      const deviceName = device.name || `设备 ${device.id || index + 1}`
      
      // 绘制设备名称文字（无背景）
      ctx.fillStyle = '#ffffff'
      ctx.font = '12px Arial'
      ctx.textAlign = 'left'
      ctx.fillText(deviceName, 5, y + 2)
    })
  }
  
  // 绘制当前时间线
  const currentX = (currentMinutes - startMinutes) * pixelsPerMinute - scrollOffset.value
  if (currentX >= -10 && currentX <= containerWidth + 10) {
    ctx.strokeStyle = '#ffffff'
    ctx.lineWidth = 2
    ctx.beginPath()
    ctx.moveTo(currentX, 0)
    ctx.lineTo(currentX, containerHeight)
    ctx.stroke()
    
    // 绘制时间标签
    ctx.fillStyle = '#ffffff'
    ctx.font = 'bold 12px Arial'
    ctx.fillText(props.currentTime, currentX + 2, containerHeight - 5)
  }
  
  // 绘制悬停时间
  if (showHoverTime.value && hoverTime.value) {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'
    ctx.fillRect(hoverX.value - 30, 0, 60, 20)
    ctx.fillStyle = '#ffffff'
    ctx.font = '10px Arial'
    ctx.textAlign = 'center'
    ctx.fillText(hoverTime.value, hoverX.value, 15)
    ctx.textAlign = 'left'
  }
  
  // 更新滚动条
  updateScrollbar(totalTimelineWidth, containerWidth)
}

// 更新滚动条
const updateScrollbar = (totalWidth: number, visibleWidth: number) => {
  if (!thumbRef.value || !scrollbarRef.value) return
  
  const trackWidth = scrollbarRef.value.clientWidth
  const thumbWidth = Math.max(20, (visibleWidth / totalWidth) * trackWidth)
  const maxOffset = totalWidth - visibleWidth
  
  // 计算滚动条位置
  const thumbPosition = maxOffset > 0 ? (scrollOffset.value / maxOffset) * (trackWidth - thumbWidth) : 0
  
  thumbRef.value.style.width = `${thumbWidth}px`
  thumbRef.value.style.left = `${thumbPosition}px`
}

// 滚动到指定位置（暂时注释掉，因为未使用）
// const scrollTo = (offset: number) => {
//   const startMinutes = timeToMinutes(props.startTime)
//   const endMinutes = timeToMinutes(props.endTime)
//   const totalMinutes = endMinutes - startMinutes
//   const displayMinutes = currentZoom.value.hours * 60
//   const containerWidth = containerRef.value?.clientWidth || 0
//   const totalTimelineWidth = totalMinutes * (containerWidth / displayMinutes)
//   const maxOffset = Math.max(0, totalTimelineWidth - containerWidth)
//   
//   scrollOffset.value = Math.max(0, Math.min(offset, maxOffset))
//   drawTimeline()
// }

// 事件处理函数
const handleMouseDown = (e: MouseEvent) => {
  if (!props.enableDrag) return
  
  isDragging.value = true
  dragStartX.value = e.clientX
  dragStartTime.value = props.currentTime
}

const handleMouseMove = (e: MouseEvent) => {
  if (!canvasRef.value || !containerRef.value) return
  
  const rect = canvasRef.value.getBoundingClientRect()
  const x = e.clientX - rect.left
  
  // 计算悬停时间（考虑滚动偏移）
  const startMinutes = timeToMinutes(props.startTime)
  const displayMinutes = currentZoom.value.hours * 60
  const pixelsPerMinute = containerRef.value.clientWidth / displayMinutes
  
  const hoverMinutes = startMinutes + ((x + scrollOffset.value) / pixelsPerMinute)
  if (hoverMinutes >= 0 && hoverMinutes <= 24 * 60) {
    hoverTime.value = minutesToTime(hoverMinutes)
    hoverX.value = x
    showHoverTime.value = true
  }
  
  if (isDragging.value && props.enableDrag) {
    const deltaX = e.clientX - dragStartX.value
    const deltaMinutes = deltaX / pixelsPerMinute
    
    const startMinutes = timeToMinutes(dragStartTime.value)
    const newMinutes = startMinutes + deltaMinutes
    
    if (newMinutes >= 0 && newMinutes <= 24 * 60) {
      const newTime = minutesToTime(newMinutes)
      emit('timeChange', newTime)
    }
  }
  
  // 处理滚动条拖拽
  if (isThumbDragging.value) {
    const deltaX = e.clientX - thumbDragStartX.value
    const trackWidth = scrollbarRef.value?.clientWidth || 0
    const thumbWidth = thumbRef.value?.clientWidth || 0
    const maxThumbPosition = trackWidth - thumbWidth
    
    const newThumbPosition = Math.max(0, Math.min(thumbDragStartOffset.value + deltaX, maxThumbPosition))
    const scrollRatio = maxThumbPosition > 0 ? newThumbPosition / maxThumbPosition : 0
    
    const startMinutes = timeToMinutes(props.startTime)
    const endMinutes = timeToMinutes(props.endTime)
    const totalMinutes = endMinutes - startMinutes
    const totalTimelineWidth = totalMinutes * (containerRef.value.clientWidth / displayMinutes)
    const maxOffset = Math.max(0, totalTimelineWidth - containerRef.value.clientWidth)
    
    scrollOffset.value = scrollRatio * maxOffset
    drawTimeline()
  }
}

const handleMouseUp = () => {
  isDragging.value = false
  isThumbDragging.value = false
}

const handleClick = (e: MouseEvent) => {
  if (isDragging.value || isThumbDragging.value) return
  
  if (!canvasRef.value || !containerRef.value) return
  
  const rect = canvasRef.value.getBoundingClientRect()
  const x = e.clientX - rect.left
  
  const startMinutes = timeToMinutes(props.startTime)
  const displayMinutes = currentZoom.value.hours * 60
  const pixelsPerMinute = containerRef.value.clientWidth / displayMinutes
  
  const clickMinutes = startMinutes + ((x + scrollOffset.value) / pixelsPerMinute)
  if (clickMinutes >= 0 && clickMinutes <= 24 * 60) {
    const newTime = minutesToTime(clickMinutes)
    selectedTime.value = newTime
    emit('timeChange', newTime)
  }
}


// 处理鼠标滚轮
const handleWheel = (e: WheelEvent) => {
  e.preventDefault()
  
  const delta = e.deltaY > 0 ? 50 : -50
  const startMinutes = timeToMinutes(props.startTime)
  const endMinutes = timeToMinutes(props.endTime)
  const totalMinutes = endMinutes - startMinutes
  const displayMinutes = currentZoom.value.hours * 60
  const containerWidth = containerRef.value?.clientWidth || 0
  const totalTimelineWidth = totalMinutes * (containerWidth / displayMinutes)
  const maxOffset = Math.max(0, totalTimelineWidth - containerWidth)
  
  scrollOffset.value = Math.max(0, Math.min(scrollOffset.value + delta, maxOffset))
  drawTimeline()
}

// 滚动条事件处理
const handleScrollbarClick = (e: MouseEvent) => {
  if (!scrollbarRef.value || !thumbRef.value) return
  
  const rect = scrollbarRef.value.getBoundingClientRect()
  const clickX = e.clientX - rect.left
  const trackWidth = scrollbarRef.value.clientWidth
  
  const scrollRatio = clickX / trackWidth
  const startMinutes = timeToMinutes(props.startTime)
  const endMinutes = timeToMinutes(props.endTime)
  const totalMinutes = endMinutes - startMinutes
  const displayMinutes = currentZoom.value.hours * 60
  const containerWidth = containerRef.value?.clientWidth || 0
  const totalTimelineWidth = totalMinutes * (containerWidth / displayMinutes)
  const maxOffset = Math.max(0, totalTimelineWidth - containerWidth)
  
  scrollOffset.value = scrollRatio * maxOffset
  drawTimeline()
}

const handleThumbMouseDown = (e: MouseEvent) => {
  e.stopPropagation()
  isThumbDragging.value = true
  thumbDragStartX.value = e.clientX
  thumbDragStartOffset.value = thumbRef.value?.offsetLeft || 0
}

// 监听props变化
watch(() => [props.currentTime, props.zoomLevel, props.timeSegments], () => {
  nextTick(() => {
    drawTimeline()
  })
}, { deep: true })


// 监听选中时间变化
watch(selectedTime, () => {
  // 触发重新计算录像段选中状态
  nextTick(() => {
    // 这里可以添加额外的逻辑，比如滚动到选中的录像段
  })
})

// 监听容器尺寸变化
const resizeObserver = ref<ResizeObserver>()

onMounted(() => {
  drawTimeline()
  
  // 监听容器尺寸变化
  resizeObserver.value = new ResizeObserver(() => {
    drawTimeline()
  })
  
  if (containerRef.value) {
    resizeObserver.value.observe(containerRef.value)
  }
  
  // 添加全局鼠标事件监听
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
})

onUnmounted(() => {
  if (resizeObserver.value) {
    resizeObserver.value.disconnect()
  }
  
  // 移除全局鼠标事件监听
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)
})

// 导出方法
defineExpose({
  redraw: drawTimeline
})
</script>

<style lang="scss" scoped>
.custom-timeline-container {
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  position: relative;
  display: flex;
  flex-direction: column;
  
  .timeline-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    
    canvas {
      width: 100%;
      height: 100%;
      cursor: pointer;
      display: block;
      z-index: 1; // 确保canvas在底层
    }
    
    .recording-segments-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none; // 让点击事件穿透到canvas
      z-index: 20; // 确保录像段在canvas之上
      
      .recording-segment {
        position: absolute;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.4);
        pointer-events: auto; // 录像段可以点击
        z-index: 30; // 确保录像段在最上层
        
        &:hover {
          opacity: 0.8;
          border-color: rgba(255, 255, 255, 0.8);
          transform: scale(1.02);
        }
        
        &.selected {
          border: 2px solid #fff;
          box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
          transform: scale(1.05);
          z-index: 20;
        }
        
        .segment-label {
          color: #fff;
          font-size: 12px;
          font-weight: bold;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 0 6px;
          text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
          background-color: rgba(0, 0, 0, 0.3);
          border-radius: 2px;
        }
      }
    }
  }
  
  .scrollbar-container {
    height: 16px;
    background-color: #2a2a2a;
    border-top: 1px solid #3a3a3a;
    position: relative;
    
    .scrollbar-track {
      width: 100%;
      height: 100%;
      position: relative;
      cursor: pointer;
      
      .scrollbar-thumb {
        position: absolute;
        top: 2px;
        height: 12px;
        background-color: #666;
        border-radius: 6px;
        cursor: grab;
        transition: background-color 0.2s;
        
        &:hover {
          background-color: #888;
        }
        
        &:active {
          cursor: grabbing;
          background-color: #aaa;
        }
      }
    }
  }
}
</style>
